<template>
  <section>
    <el-dialog 
      :value="value"
      :title="good.id == 0 ? '添加商品' : '编辑商品' "
      :visible.sync="visible"
      @close="close"
      width="500px"
    >
      <el-form 
        :model="good"
        :rules="rules"
        ref="goodForm"
      >
        <el-form-item
            label="条形码"
            :label-width="labelWidth"
            prop="barCode"
        >
          <el-input
              v-model="good.barCode"
              auto-complete="off"
              suffix-icon="fa fa-vcard"
              placeholder="请填写商品名称"
          />
        </el-form-item>
        <el-form-item 
          label="商品名称"
          :label-width="labelWidth" 
          prop="name"
        >
          <el-input 
            v-model="good.name"
            auto-complete="off" 
            suffix-icon="fa fa-vcard" 
            placeholder="请填写商品名称"
          />
        </el-form-item>
        <el-form-item
            label="供应商"
            :label-width="labelWidth"
            prop="supplier"
        >
          <el-input
              v-model="good.supplier"
              auto-complete="off"
              suffix-icon="fa fa-vcard"
              placeholder="请填写供应商"
          />
        </el-form-item>

        <el-form-item
            label="规格"
            :label-width="labelWidth"
            prop="standard"
        >
          <el-input
              v-model="good.standard"
              auto-complete="off"
              suffix-icon="fa fa-vcard"
              placeholder="请填写规格"
          />
        </el-form-item>
        <el-form-item
            label="价格"
            :label-width="labelWidth"
            prop="price"
        >
          <el-input
              v-model="good.price"
              auto-complete="off"
              suffix-icon="fa fa-vcard"
              placeholder="请填写价格"
          />
        </el-form-item>
        <el-form-item 
          label="描述"
          :label-width="labelWidth" 
          prop="description"
        >
          <el-input 
            v-model="good.description"
            auto-complete="off" 
            type="textarea"
            :rows="2"
            placeholder="请填写描述"
          />
        </el-form-item>
      </el-form>
      <span 
        slot="footer" 
        class="dialog-footer"
      >
        <el-button 
          size="small" 
          @click="cancle('goodForm')"
        >取 消</el-button>
        <el-button 
          size="small" 
          type="primary" 
          @click="submit('goodForm')"
        >确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<style>
</style>
<script>
export default {
  name: "AddAndEdit",
  data() {
    return {
      visible: false,
      labelWidth: "",
      good: { id: 0 },
      applications: [],
      rules: {
        goodName: [{required: true, message: "请输入权限名称", trigger: "blur"}]
      }
    };
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler: function(val) {
        this.visible = val.show;
        this.labelWidth = val.labelWidth || "120px";
        this.good = val.good;
        this.applications = val.applications;
      }
    },
    visible(val) {
      if (!val) this.$emit("on-show-change", this.$data);
    }
  },
  created() {},
  methods: {
    close() {
      this.cancle('goodForm');
    },
    cancle(formName) {
      this.$refs[formName].clearValidate();
      this.visible = false;
      this.good = {
        id: 0
      };  
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const callback = () => {
            this.cancle(formName);
          };
          this.$api.common.goodSave(this.good, callback)
        } else {
          return false;
        }
      });
    }
  },
  props: {
    value: {
      type: Object,
      default: function() {
        return {
          show: false,
          labelWidth: "120px",
          good: {
            id: 0
          },
          applications: []
        };
      }
    }
  }
};
</script>
